<template>
  <!-- 种母历史记录 -->
  <div>
    <el-button type="danger" :icon="Plus" style="float: left; margin-left: 10px"
      >新增</el-button
    >&emsp;
    <el-button
      type="danger"
      :icon="Check"
      style="float: left; margin-left: 10px"
      @click="save()"
      >保存</el-button
    >&emsp;
  </div>
  <br />

  <br />
  <hr style="font-size: 20px" />
  <br />

  <div class="table-container" style="height: 400px; position: relative">
    <table style="border-collapse: collapse">
      <tr>
        <td>序号</td>
        <td>种母耳号</td>
        <td>配种日期</td>
        <td>种公耳号</td>
        <td>妊检日期</td>
        <td>妊检结果</td>
        <td>分娩日期</td>
        <td>健羔数</td>
        <td>健羔总重</td>
        <td>弱羔数</td>
        <td>畸形数</td>
        <td>死胎数</td>
        <td>木乃伊数</td>
        <td>畸胎数</td>
        <td>当前胎次</td>
        <td>断奶日期</td>
        <td>断奶只数</td>
        <td>断奶窝重</td>
      </tr>
      <tr v-for="(ruleForm, index) in loge.healthArray">
        <td>{{ index + 1 }}</td>
        <td>
          <el-select
            style="width: 100px"
            v-model="ruleForm.sowId"
            placeholder="请选择"
          >
            <el-option
              v-for="item in eweData"
              :label="item.earNumber"
              :value="item.sleepInforId"
            />
          </el-select>
        </td>
        <td>
          <el-date-picker
            style="width: 100px"
            v-model="ruleForm.matingDate"
          ></el-date-picker>
        </td>
        <td>
          <el-select style="width: 100px" v-model="ruleForm.boarId">
            <el-option
              v-for="item in boar"
              :label="item.earNumber"
              :value="item.sleepInforId"
            ></el-option>
          </el-select>
        </td>
        <td>
          <el-date-picker
            style="width: 100px"
            v-model="ruleForm.pregnancyCheckDate"
          ></el-date-picker>
        </td>
        <td>
          <el-input
            style="width: 100px"
            v-model="ruleForm.pregnancyCheckResult"
          ></el-input>
        </td>
        <td>
          <el-date-picker
            style="width: 100px"
            v-model="ruleForm.farrowingDate"
          ></el-date-picker>
        </td>
        <td>
          <el-input
            style="width: 100px"
            v-model="ruleForm.healthyLambsCount"
          ></el-input>
        </td>
        <td>
          <el-input style="width: 100px" v-model="ruleForm.healthyL"></el-input>
        </td>
        <td>
          <el-input
            style="width: 100px"
            v-model="ruleForm.weak_lambs_count"
          ></el-input>
        </td>
        <td>
          <el-input
            style="width: 100px"
            v-model="ruleForm.deformed_lambs_count"
          ></el-input>
        </td>
        <td>
          <el-input
            style="width: 100px"
            v-model="ruleForm.stillborn_lambs_count"
          ></el-input>
        </td>
        <td>
          <el-input
            style="width: 100px"
            v-model="ruleForm.mummified_lambs_count"
          ></el-input>
        </td>
        <td>
          <el-input
            style="width: 100px"
            v-model="ruleForm.malformed_fetus_count"
          ></el-input>
        </td>
        <td>
          <el-input
            style="width: 100px"
            v-model="ruleForm.weanedNum"
          ></el-input>
        </td>
        <td>
          <el-date-picker
            style="width: 100px"
            v-model="ruleForm.weanedDate"
          ></el-date-picker>
        </td>
        <td>
          <el-input
            style="width: 100px"
            v-model="ruleForm.weanedQuantity"
          ></el-input>
        </td>
        <td>
          <el-input
            style="width: 100px"
            v-model="ruleForm.totalWeaningWeight"
          ></el-input>
        </td>
      </tr>
    </table>
  </div>
  <div style="bottom: 0; left: 0; width: 100%">
    <hr />
    <!-- <span>&emsp; 合计</span>
            <hr> -->
    <el-button
      link
      type="danger"
      :icon="Plus"
      style="float: left; margin-left: 10px"
      @click="addDomain"
      >增行</el-button
    >&emsp;
    <el-button
      link
      type="danger"
      :icon="Check"
      style="float: left; margin-left: 10px"
      @click="delDomain"
      >删行</el-button
    >&emsp;
    <br />
    <hr />
    <span style="vertical-align: top; width: 5%">&emsp; 备注</span>&emsp;
    <el-input type="textarea" style="width: 85%" />
  </div>
</template>
<script lang="ts" setup>
import { Check, Delete, Plus, Back } from '@element-plus/icons-vue';
import { reactive, ref, onMounted } from 'vue';
import axios from 'axios';
import { useRoute, useRouter } from 'vue-router';
import { ElMessage, ElMessageBox } from 'element-plus';
import type { ComponentSize, FormInstance, FormRules } from 'element-plus';
//调用持久化
import { useCounterStore } from '@/stores/counter';
const counterStore = useCounterStore();
const route = useRoute();
const router = useRouter();

const loge = reactive({
  healthArray: <any>[]
});

//增行
const addDomain = () => {
  loge.healthArray.push(
    reactive({
      createId: counterStore.employeeId,
      createTime: new Date(),
      updateId: 1,
      updateTime: new Date(),
      deleteId: 1,
      deletes: false,
      deleteTime: new Date(),
      examId: 1,
      examTime: new Date(),
      seedMotherHistoryRecordId: 0,
      sowId: '',
      matingDate: '',
      boarId: '',
      pregnancyCheckDate: '',
      pregnancyCheckResult: '',
      farrowingDate: '',
      healthyLambsCount: '',
      healthyL: '',
      weak_lambs_count: '',
      deformed_lambs_count: '',
      stillborn_lambs_count: '',
      mummified_lambs_count: '',
      malformed_fetus_count: '',
      weanedNum: '',
      weanedDate: '',
      weanedQuantity: '',
      totalWeaningWeight: ''
    })
  );
  console.log(loge.healthArray);
};
//减行
const delDomain = () => {
  loge.healthArray.splice(loge.healthArray.length - 1, 1);
};

//获取耳号
const eweData = ref<any>([]);
const geteweData = () => {
  axios
    .get('http://localhost:5039/api/SleepBegin/SelectEarFeMale')
    .then((res) => {
      eweData.value = res.data.data;
    });
};

const boar: any = ref([]);

const getboar = () => {
  axios
    .get('http://localhost:5039/api/SleepBegin/SelectEarMale')
    .then((res) => {
      console.log(res);
      boar.value = res.data.data;
    });
};

//#region 保存
const save = () => {
  let obj = {
    seedMotherHistoryRecord: loge.healthArray
  };
  axios
    .post(
      'http://localhost:5039/api/ProductionManagement/Handle/EweHistoryCreate',
      obj
    )
    .then((res) => {
      if (res.data.code == 0) {
        ElMessage.success('添加成功');
        router.push('/Seed_mother_history_recordList');
      }
    });
};

onMounted(() => {
  geteweData();
  getboar();
});

//#endregion
</script>

<style scoped>
.demo-pagination-block + .demo-pagination-block {
  margin-top: 10px;
}

.demo-pagination-block .demonstration {
  margin-bottom: 16px;
}

/* 设置第一行的 td 顶部边框加粗并设置为红色 */
table tr:first-child td {
  border-top: 3px solid red;
  /* 设置顶部边框为3px宽度的红色 */
  padding: 10px;
  text-align: center;
}

/* 设置 td 的样式 */

table td {
  padding: 10px;
  border: 1px solid #ccc;
  text-align: center;
  font-size: 14px;
  height: 60px;
  width: 150px;
  white-space: nowrap;
  /* 防止内容换行 */
}

/* 可选：为 table 添加样式 */
table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

/*______________________________________________________*/

.table-container {
  max-width: 100%;
  overflow-x: auto;
  /* 启用水平滚动 */
  margin: 20px 0;
  /* 设置容器的外边距 */
}
</style>
